import { patch, mount } from "./patch"
import { processComponent } from "./core/component"
import { createVNode } from "./vnodes/vnode"
import type { vnode, App, CustomDirectiveOption } from "../types"
import { ShapeFlag } from "./flags"
import { mountElement } from "./core/element/mount"
import { mountComponent } from "./core/component/mount"


function render({ shapeFlag }:vnode, container:HTMLElement) {
  if(shapeFlag! & ShapeFlag.ELEMENT) {
    mountElement()
  } else if(shapeFlag! & ShapeFlag.COMPONENT) {
    mountComponent()
  }

}


function createFactoryApp() {
  return function(rootComponent:unknown) {
    const app: App = {
      component() {},
      use() {},
      
      directive(name:string, option:CustomDirectiveOption) {

      },

      mount(rootContainer:string|HTMLElement) {
        const root = typeof rootContainer === 'string' 
          ? document.querySelector(rootContainer) as HTMLElement
          : rootContainer

        const vnode = createVNode()

        render(vnode, root)

        return vnode
      }
    }

    return app
  }
}

export function createRenderer(option:object) {
  return {
    render() {
      
    },
    createApp: createFactoryApp()
  }
}
